<template>
  <div>
        <ul>
        <li v-for="(msg) in msgs" :key="msg.id">
            <!-- 跳转路由并携带参数，to的字符串写法 -->
            <!-- <router-link  :to="`/home/message/detail?id=${msg.id}&title=${msg.title}`">{{msg.title}}</router-link> -->

            <!-- 跳转路由并携带参数，to的对象写法 -->
            <router-link :to="{
                // path:'/home/message/detail',
                name:'xiangqing',
                query:{
                    id : msg.id,
                    title : msg.title
                }
            }">
                {{msg.title}}
            </router-link>
        </li>
        </ul>
        <hr>
        <router-view></router-view>
    </div>
</template>

<script>
    export default {
        name:'Message',
        data(){
            return {
                msgs:[
                    {id:'001',title:'message001'},
                    {id:'002',title:'message002'},
                    {id:'003',title:'message003'}
                ]
            }
        }
    }
</script>

<style>

</style>